<template>
  <div class="page-style">
    <btn-area :agent-level="levels" @selectLevels="submitBtn" />
    <el-table
      :data="levels"
      border
      style="width: 100%;font-size:12px;"
    >
      <el-table-column
        prop="code_num"
        label="授权编号"
        width="80"
      />
      <el-table-column
        label="授权名"
        width="80"
      >
        <template slot-scope="scope">
          {{ scope.row.anent_content.anent_name }}
        </template>
      </el-table-column>
      <el-table-column
        prop="brand_name"
        label="授权品牌"
      >
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.brand_name }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        label="授权书"
        width="105"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 80px; height: 80px"
            :src="scope.row.anent_approval_img"
            :preview-src-list="[scope.row.anent_approval_img]"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="授权等级名称"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.level_content.level_name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="上级代理/代理授权码"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.anent_fid ? scope.row.anent_fid_content.anent_name + ' /' : '总部' }} {{ scope.row.anent_fid ? scope.row.anent_brand_fid_content.code_num : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="上级代理等级"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.anent_fid ? scope.row.anent_fid_content.level_content.level_name : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="审核权限"
        width="80"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.examine_status === '1'" type="text" @click="setExamine(scope.row)">是</el-button>
          <el-button v-if="scope.row.examine_status === '0'" type="text" @click="setExamine(scope.row)">否</el-button>
          <!-- <del-confirm :title="scope.row.examine_status === '0' ? '是否确认设置代理当前品牌审核权限？' : '是否确认关闭代理当前品牌审核权限？'" :button-text="scope.row.examine_status === '0' ? '否' : '是'" icon-color="scope.row.examine_status === '0' ? 'green' : 'red'" @onConfirm="setExamineStatus(scope.row)" /> -->
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="resetImpowerBtn(scope.row)">授权修改</el-button>
          <del-confirm :title="`是否确认解除 [${scope.row.brand_name}] 的代理  [${scope.row.anent_content.anent_name}]   的   [${ scope.row.level_content.level_name }]   授权？`" button-text="解除授权" @onConfirm="jiechu(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <canvas id="canvas" width="312" height="624" />
    <reset-impower ref="resetImpower" @reload="reloadFun" />
    <examine-dialog ref="examine" @reloadFun="reloadFun" />
  </div>
</template>

<script>
import btnArea from './components/impower/btn-area'
import { setExamineStatusApi, operationAgentBrand, uploadWarrant, getAgentImpowerInfoApi } from '@/api/agent'
import { getBrandsLevels } from '@/api/brand'
import delConfirm from '@/components/DelConfirm'
import { conversion } from '@/utils/rules'
import { drawPhoto } from '@/utils/drawPhoto'
import resetImpower from './components/impower/reset-impower-dialog'
import examineDialog from './components/impower/examine-set'
export default {
  components: {
    delConfirm,
    btnArea,
    resetImpower,
    examineDialog
  },
  data() {
    return {
      form: {},
      val: '',
      levels: [],
      anent_id: '',
      title: '',
      brand_id: '',
      status: 1
    }
  },
  created() {
    if (this.$route.params.agent_id) {
      // console.log(this.$route.params)
      this.anent_id = this.$route.params.agent_id
      if (this.$route.params.brand_id) {
        this.brand_id = this.$route.params.brand_id
      }
    }
    this.getAgentSelfInfo()
  },
  methods: {
    setExamine(row) {
      getBrandsLevels({ brand_id: row.brand_id }).then(res => {
        console.log(row)
        this.$refs['examine'].dialogShow = true
        this.$refs['examine'].examine_status = row.examine_status === '1'
        this.$refs['examine'].levels = res.list
        this.$refs['examine'].brand_id = row.brand_id
        this.$refs['examine'].anent_id = row.anent_id
        if (row.examine_status === '1') {
          const checkList = []
          getBrandsLevels({ brand_id: row.brand_id }).then(res => {
            res.list.forEach(level => {
              row.examine_content.forEach(item => {
                if (level.level_int === item) {
                  checkList.push(level.level_name)
                }
              })
            })
            console.log(checkList)
            this.$refs['examine'].checkList = checkList
          })
        }
      })
    },
    reloadFun() {
      this.getAgentSelfInfo()
    },
    resetImpowerBtn(row) {
      console.log(row)
      getBrandsLevels({ brand_id: row.brand_id }).then(res => {
        this.$refs['resetImpower'].agent_name = row.anent_content.anent_name
        this.$refs['resetImpower'].yes_date = row.yes_date
        this.$refs['resetImpower'].anent_id = row.anent_id
        this.$refs['resetImpower'].brand_id = row.brand_id
        this.$refs['resetImpower'].brand_name = row.brand_name
        this.$refs['resetImpower'].level_name = row.level_content.level_name
        this.$refs['resetImpower'].levels = res.list
        this.$refs['resetImpower'].people_card_num = row.anent_content.people_card_num
        this.$refs['resetImpower'].anent_login_name = row.anent_content.anent_login_name
        this.$refs['resetImpower'].code_num = row.code_num
        this.$refs['resetImpower'].dialogShow = true
      })
    },
    jiechu(row) {
      // console.log(row)
      const data = {
        type: 2,
        anent_id: row.anent_id,
        anent_fid: row.anent_fid,
        brand_id: row.brand_id,
        type_one: '1'
      }
      operationAgentBrand(data).then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.$message.success(res.log)
          this.getAgentSelfInfo()
        }
      })
    },
    getLevels(id) {
      getBrandsLevels({ brand_id: id }).then(res => {
        console.log(res)
        return res.list
      })
    },
    // 获取代理信息
    getAgentSelfInfo() {
      const newData = {
        brand_id: this.brand_id,
        anent_id: this.anent_id,
        status: this.status
      }
      getAgentImpowerInfoApi(newData).then(res => {
        console.log(res)
        this.levels = res
      })
    },
    setExamineStatus(row) {
      // console.log(row)
      const data = {
        anent_id: row.anent_id,
        brand_id: row.brand_id,
        examine_status: row.examine_status === '0' ? '1' : '0'
      }
      console.log(data)
      setExamineStatusApi(data).then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.getAgentSelfInfo()
        }
      })
    },
    submitBtn(val) {
      // console.log(val)
      for (const i in val) {
        const data = {
          type: 1,
          anent_id: this.anent_id,
          level: val[i].level,
          brand_id: val[i].id,
          type_one: 2,
          anent_fid: val[i].anent_fid,
          status: 1
        }
        // console.log(data)
        this.operationAgentBrandFun(data)
      }
    },
    // 操作代理等级
    operationAgentBrandFun(data) {
      operationAgentBrand(data).then(res => {
        console.log(res, this.levels)
        if (res.code === 200) {
          const textArr = [
            {
              text: res.anent_content.anent_name,
              x: 270,
              y: 420
            },
            {
              text: conversion(res.anent_content.people_card_num, 6, 14, 8),
              x: 270,
              y: 475
            },
            {
              text: res.anent_content.anent_login_name,
              x: 270,
              y: 530
            },
            {
              text: res.code_num,
              x: 270,
              y: 585
            },
            {
              text: res.level_content.level_name,
              x: 270,
              y: 640
            },
            {
              text: res.yes_date,
              x: 270,
              y: 695
            }
          ]
          let warrantImg = ''
          const info = res
          drawPhoto(res.brand_content.approval_img, { width: '800', height: '1131' }, textArr, imgUrl => {
            console.log(imgUrl)
            warrantImg = imgUrl
            const that = this
            const imgData = {
              anent_id: info.anent_content.id,
              brand_id: data.brand_id,
              code_num: info.code_num,
              anent_approval_img: warrantImg
            }
            console.log(imgData)
            uploadWarrant(imgData).then(res => {
              console.log(res)
              if (res.code === 200) {
                that.$message.success('代理信息提交成功！')
                that.getAgentSelfInfo()
              }
            })
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
